<template>
  <!--实名认证审核-->
  <h1>实名认证审核</h1>
  <el-table :data="arr" style="width: 80%;margin: 0 auto;">
    <el-table-column label="id编号" prop="id" align="center"></el-table-column>
    <el-table-column label="姓名" prop="name" align="center"></el-table-column>
    <el-table-column label="身份证号" prop="idNumber" align="center"></el-table-column>
    <el-table-column label="人像照" align="center">
      <template #default="scope">
        <img v-if="scope.row.portraitUrl" :src="scope.row.portraitUrl" style="max-width: 100px; max-height: 100px;">
      </template>
    </el-table-column>
    <el-table-column label="国徽照" align="center">
      <template #default="scope">
        <img v-if="scope.row.nationalEmblemUrl" :src="scope.row.nationalEmblemUrl" style="max-width: 100px; max-height: 100px;">
      </template>
    </el-table-column>
    <el-table-column label="审核状态" prop="status" align="center"></el-table-column>
    <el-table-column label="开始时间" prop="createdAt" align="center"></el-table-column>
    <el-table-column label="结束时间" prop="updatedAt" align="center"></el-table-column>

    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="danger" @click="rejectApproval(scope.row.id)">拒绝审批</el-button>
        <el-button type="success" @click="approveApproval(scope.row.id)">同意审批</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { ElMessage } from 'element-plus'; // 确保这行存在
import axios from "axios";

// 1.定义 arr 数组用于存储从后端获取的数据
const arr = ref([])

// 2.在组件挂载时调用 fetchData 函数获取数据
onMounted(() => {
  fetchData();
});

// 3.定义 fetchData 函数用于从后端获取数据
async function fetchData() {
  try {
    const response = await axios.get('http://localhost:9095/api/verification/list');
    console.log('后端返回的数据:', response.data); // 添加这行
    // 将获取到的数据赋值给 arr
    arr.value = response.data;
    console.log('获取到的数据:', arr.value); // 添加调试日志
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}

// 4.定义 rejectApproval 函数用于处理拒绝审批的操作
// 4.定义 rejectApproval 函数用于处理拒绝审批的操作
async function rejectApproval(id) {
  try {
    const response = await axios.put(`http://localhost:9095/api/verification/reject/${id}`, { id });
    console.log('拒绝成功:', response.data);
    ElMessage.success('拒绝成功');
    // 刷新数据
    await fetchData();
  } catch (error) {
    console.error('拒绝失败:', error);
    ElMessage.error('拒绝失败');
  }
}

// 5.定义 approveApproval 函数用于处理同意审批的操作
async function approveApproval(id) {
  try {
    const response = await axios.put(`http://localhost:9095/api/verification/approve/${id}`, { id });
    console.log('批准成功:', response.data);
    ElMessage.success('批准成功');
    // 刷新数据
    await fetchData();
  } catch (error) {
    console.error('批准失败:', error);
    ElMessage.error('批准失败');
  }
}
</script>

<style scoped>

</style>